/**
 * desc:表格中展示第三方商品信息html
 * @item {object} 商品的信息
 *
 */
import React from 'react';
import {
  formatHref,
  openUrl,
  renderGoodsName,
  formatAmount,
} from '@/utils/utils.jsx';
import CommonParagraph from '@/components/CommonParagraph';
import CommonPlatformImg from '@/components/CommonImg/PlatformComponent';
import { Popover } from 'antd';
import styles from './index.module.less';

export default ({ item = {}, hasGoodsCode, hasGoodsCode2, hasGoodsCode3, isPrice = false, extraContent }) => {
  const {
    platType,
    ecGoodsId,
    ecGoodsCommonId,
    ecGoodsImage,
    ecSkuName,
    ecGoodsName,
    isCarefullySelected,
    outStoreSku,
    outStoreSpu
  } = item;
  const path = formatHref(ecGoodsCommonId, platType, ecGoodsId);
  //   const goodsName = renderGoodsName(platType, ecGoodsName, ecSkuName);
  return (
    <div className={styles.wrap}>
      {/* <div className={styles.imgWrap}>{renderImg(path, src)}</div> */}
      <div className={styles.imgWrap}>
        <CommonPlatformImg
          img={ecGoodsImage}
          isCloudIcon={isCarefullySelected == '1' ? true : false}
        />
      </div>
      <div>
        <Popover
          content={
            <div>
              <div className="textOverflowMultiTwo">{ecGoodsName}</div>
              <div className="textOverflowMultiTwo">{ecSkuName}</div>
            </div>
          }
        >
          <div
            style={{ whiteSpace: 'pre-wrap' }}
            className={path ? 'common-color2' : ''}
            onClick={() => (path ? openUrl(path) : null)}
          >
            <div>{ecGoodsName}</div>
            <div>
              {ecSkuName}
              <CommonParagraph
                text={
                  ecSkuName ? `${ecGoodsName} ${ecSkuName}` : `${ecGoodsName}`
                }
              />
            </div>
          </div>
        </Popover>
        {hasGoodsCode && <span>商品编码：{outStoreSku}</span>}
        {hasGoodsCode2 && <span>网店商品编码：{outStoreSku}</span>}
        {hasGoodsCode3 && <div>款式编码：{outStoreSpu}</div>}
        {isPrice && (
          <p className="common-color5">
            价格：
            <span className="common-color9">
              ¥{formatAmount(item.ecGoodsPrice)}
            </span>
          </p>
        )}
        {extraContent}
      </div>
    </div>
  );
};
